<!-- 统计卡片 -->
<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="stat-card">
            <div class="icon text-primary">
                <i class='bx bxs-calendar'></i>
            </div>
            <div class="value" th:text="${todayOrders}">0</div>
            <div class="label">今日订单</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="icon text-warning">
                <i class='bx bxs-bell'></i>
            </div>
            <div class="value" th:text="${pendingOrderCount}">0</div>
            <div class="label">待处理订单</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="icon text-info">
                <i class='bx bxs-hourglass'></i>
            </div>
            <div class="value" th:text="${processingOrderCount}">0</div>
            <div class="label">进行中订单</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="icon text-success">
                <i class='bx bxs-star'></i>
            </div>
            <div class="value" th:text="${#numbers.formatDecimal(averageRating, 1, 1)}">0.0</div>
            <div class="label">平均评分</div>
        </div>
    </div>
</div>

<!-- 图表区域 -->
<div class="row">
    <div class="col-md-8">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title">订单趋势</h5>
                <div class="chart-container" style="position: relative; height:400px;">
                    <canvas id="orderTrendChart"></canvas>
                    <div class="chart-loading">加载中...</div>
                    <div class="chart-error" style="display: none;">图表加载失败</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">评分统计</h5>
                <div class="rating-stats">
                    <div th:each="rating, stat : ${ratingDistribution}" class="rating-item">
                        <span class="stars">
                            <i class='bx bxs-star'></i>
                            <span th:text="${5 - stat.index}">5</span>
                        </span>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar"
                                th:style="'width: ' + ${rating > 0 ? rating * 100 / #aggregates.sum(ratingDistribution) : 0} + '%'"
                                th:aria-valuenow="${rating}"
                                aria-valuemin="0"
                                th:aria-valuemax="${#aggregates.sum(ratingDistribution)}">
                            </div>
                        </div>
                        <span class="count" th:text="${rating}">0</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加Chart.js引用 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>

<!-- 添加数据展示用于调试 -->
<div id="debug-data" style="display: none;" th:text="${orderTrend}"></div>

<script th:inline="javascript" data-chart-init>
    (function() {
        // 从Thymeleaf获取数据并解析
        const rawData = /*[[${orderTrend}]]*/ [];
        console.log('原始订单趋势数据:', rawData);
        
        // 将数据转换为正确的格式
        const formattedData = rawData.map(item => ({
            date: item.date,
            count: parseInt(item.count)
        }));
        
        console.log('格式化后的订单趋势数据:', formattedData);
        
        // 定义本地初始化函数
        function initializeChart() {
            console.log('准备初始化图表');
            const canvas = document.getElementById('orderTrendChart');
            const chartLoading = document.querySelector('.chart-loading');
            const chartError = document.querySelector('.chart-error');
            
            if (!canvas) {
                console.error('找不到canvas元素');
                return;
            }
            
            // 显示加载状态
            if (chartLoading) chartLoading.style.display = 'block';
            if (chartError) chartError.style.display = 'none';
            
            try {
                console.log('使用图表数据:', formattedData);
                
                // 销毁已存在的图表实例
                const existingChart = Chart.getChart(canvas);
                if (existingChart) {
                    existingChart.destroy();
                }
                
                // 创建图表
                const chart = new Chart(canvas, {
                    type: 'line',
                    data: {
                        labels: formattedData.map(item => {
                            const date = item.date.split('-');
                            return `${date[1]}-${date[2]}`;
                        }),
                        datasets: [{
                            label: '订单数量',
                            data: formattedData.map(item => item.count),
                            fill: true,
                            borderColor: '#1890ff',
                            backgroundColor: 'rgba(24, 144, 255, 0.1)',
                            tension: 0.4,
                            pointRadius: 4,
                            pointBackgroundColor: '#1890ff',
                            borderWidth: 2
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        animation: {
                            duration: 1000
                        },
                        layout: {
                            padding: {
                                top: 10,
                                right: 20,
                                bottom: 10,
                                left: 10
                            }
                        },
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                mode: 'index',
                                intersect: false,
                                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                                titleColor: '#333',
                                bodyColor: '#666',
                                borderColor: '#e1e1e1',
                                borderWidth: 1,
                                padding: 10,
                                callbacks: {
                                    title: function(tooltipItems) {
                                        return '日期: ' + formattedData[tooltipItems[0].dataIndex].date;
                                    },
                                    label: function(context) {
                                        return '订单数: ' + context.raw;
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    stepSize: 1,
                                    color: '#666',
                                    font: {
                                        size: 12
                                    }
                                },
                                grid: {
                                    color: '#f0f0f0',
                                    drawBorder: false
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                },
                                ticks: {
                                    color: '#666',
                                    font: {
                                        size: 12
                                    }
                                }
                            }
                        }
                    }
                });
                
                console.log('图表创建成功');
                if (chartLoading) chartLoading.style.display = 'none';
                
            } catch (error) {
                console.error('图表创建失败:', error);
                if (chartLoading) chartLoading.style.display = 'none';
                if (chartError) {
                    chartError.style.display = 'block';
                    chartError.textContent = '图表加载失败: ' + error.message;
                }
            }
        }

        // 立即初始化图表
        initializeChart();
    })();
</script> 